<template>
  <div id="ContactUs" v-if="routeUrl != '/login'">
    <div
      class="item-box"
      style="position: relative"
      @mouseenter="showWeixinQRCode = true"
      @mouseleave="showWeixinQRCode = false"
    >
      <div><span class="iconfont icon-weixin"></span></div>
      <div class="divp">微信扫一扫</div>
      <div class="weixinQRcode" :class="{ show: showWeixinQRCode }">
        <div>
          <img :src="indexInfo" alt="" srcset="" />
          <div class="sys">微信扫一扫</div>
        </div>
      </div>
    </div>
    <div
      class="item-box"
      style="position: relative"
      @mouseenter="showPhoneNmuber = true"
      @mouseleave="showPhoneNmuber = false"
    >
      <div>
        <el-icon size="20"><Phone /></el-icon>
      </div>
      <div class="divp f14">电话客服</div>
      <div class="phoe-number" :class="{ show: showPhoneNmuber }">
        <div v-for="(item, index) in phoneData" :key="item">
          <div>热线{{ index + 1 }}</div>
          <div>{{ item }}</div>
        </div>
      </div>
    </div>
    <div
      class="item-box goToTop"
      :class="{ show: showGoToTop }"
      @click="handleGoToTop"
    >
      <div>
        <el-icon size="20"><ArrowUp /></el-icon>
      </div>
      <div class="divp f14 totop" :class="{ isShow: !showGoToTop }">
        回到顶部
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, computed, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { get } from 'lodash';
const route = useRoute();
const store = useStore();
const routeUrl = ref('');
const indexInfo = ref('');
const showGoToTop = ref(false);
const showWeixinQRCode = ref(false);
const showPhoneNmuber = ref(false);

const phoneData = computed(() =>
  get(store.getters, 'indexInfo.mobile.kf_mobile', ''),
);
watch(route, () => {
  routeUrl.value = route.path;
});
const handleScroll = () => {
  const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
  showGoToTop.value = scrollTop >= 150;
};
const handleGoToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  });
};
onMounted(() => {
  window.addEventListener('scroll', handleScroll);
  indexInfo.value = localStorage.getItem('code');
});
onBeforeUnmount(() => {
  // 组件销毁时移除监听器
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style lang="scss" scoped>
#ContactUs {
  z-index: 99999;
  position: fixed;
  right: 0;
  bottom: 15%;
  .item-box {
    color: var(--text-color);
    width: 60px;
    text-align: center;
    margin-bottom: 2px;
    padding-top: 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    background: #ccc;
    &:hover {
      background-color: var(--background-color);
    }
    .divp {
      margin-bottom: 4px;
    }
  }
  .iconfont {
    font-size: 24px;
  }
  .goToTop {
    width: 0;
    height: 0;
    background-color: var(--background-color);
    &.show {
      width: 60px;
      height: 60px;
      transition: all 0.7s;
    }
  }
  .weixinQRcode {
    width: 180px;
    height: 180px;
    position: absolute;
    top: 0;
    right: 70px;
    background-color: var(--background-color);
    border-radius: 8px;
    display: none !important;
    img {
      width: 110px;
      height: 110px;
    }
    &.show {
      display: flex !important;
      justify-content: center;
      align-items: center;
    }
  }
  .phoe-number {
    width: 200px;
    // height: 56px;
    position: absolute;
    top: 0;
    right: 70px;
    background-color: var(--background-color);
    border-radius: 8px;
    display: none !important;
    &.show {
      display: block !important;
    }
  }
  .isShow {
    opacity: 0;
  }
}
.sys {
  margin-top: 15px;
}
</style>
